<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天天下班</title>
    <style>
        .div01 {
            /* border: 1px solid red; */
            width: 800px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            margin: 0 auto;
            text-shadow: #FF0000 0 0 10px;
            color: rgb(50, 9, 88);
            font-size: 100px
        }

        .span01 {
            font-size: 30px;
            text-shadow: #930cb43d 0 0 10px;
        }
        .playdiv01,
        .playbutton01,
        .butt1{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgb(9, 255, 0);
            font-size: 10px;
            position:absolute;
        }
        .butt1{
            top:300px;
        }
        .playdiv01{
            top: 300px;
            left: 95%;
        }
        
    </style>


</head>

<body>
    <div class="playdiv01" id="playdiv01"><button class="playbutton01" onclick="weizhi()">click</button></div>
    <button onclick="jishi()" class="butt1" style="color:gold;background-color:firebrick" ;>start</button>
    <div class="div02" align="center">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1048029355,2072677042&fm=26&gp=0.jpg"
            alt="点什么点，下班了">
    </div>
    <p align="center">离<span class="span01">下班</span>还有</p>
    <div class="div01" id="div01"></div>
    <div class="div02" align="center">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3394215002,2150787836&fm=15&gp=0.jpg"
            alt="点什么点，下班了">
    </div>
    <p align="center">© 2013-2020 power by xiaoelinmou</p>
    <script>
        //计时功能
        function showtime() {
            var startTime = new Date();
            console.log(startTime);
            var offTime = new Date();
            offTime.setHours(19);
            offTime.setMinutes(0);
            offTime.setSeconds(0);
            var leftTime = offTime.getTime() - startTime.getTime();
            var seconds = Math.floor(leftTime / 1000 % 60);
            var minutes = Math.floor(leftTime / 1000 / 60 % 60);
            var hours = Math.floor(leftTime / 1000 / 60 / 60 % 60);
            console.log(hours + ":" + minutes + ":" + seconds);
            var div01 = document.getElementById("div01");
            div01.innerHTML = hours + '时' + minutes + '分' + seconds + "秒";
        }
        setInterval(showtime, 100);
        var flag = 0;
        function start() {
            var text = document.getElementById("div01");
            // console.log(text);
            var color = ["green", "yellow", "red", "gray","pink","orange","black",""];
            console.log(color[parseInt(Math.random()*color.length)]);
            text.style.color=color[parseInt(Math.random()*color.length)];
        }
        setInterval(start, 8);
    </script>
     <script>
         //游戏功能
        var pdiv = document.getElementById("playdiv01");
        var time = 0;
        var haomiao = 0;
        var miaoshu = 0;
        console.log(pdiv);

        function weizhi() {
       
            // 随机坐标功能
            var x = parseInt(Math.random() * 1800);
            var y = parseInt(Math.random() * 900);
            console.log(x + " " + y);
            pdiv.style.position = "absolute";
            pdiv.style.top = y + "px";
            pdiv.style.left = x + "px";
            //分数
            time++;
            console.log(time);
        }
        function jishi() {
               //计时功能
               obj = setInterval(() => {
                haomiao = haomiao + 500;
                if (haomiao == 1000) {
                    miaoshu++;
                    haomiao = 0;
                }
                console.log(miaoshu + "." + haomiao + "秒");
                if(miaoshu == 5){
                    clearInterval(obj);
                    alert("your score is"+time);
                    location.reload();
                }
            }, 6000); //一直在执行这句代码
        }
    </script>
</body>

</html>